<template>
    <div ref="footer" id="pc-footer" class="xzcs-footer-bottom">
        <div class="bottom-top">
            <div class="con">
                <div class="logo">
                    <img
                        src="~/assets/images/logo_white.png"
                        alt="小竹财税APP"
                    />
                    <div>小竹财税官网以小竹信息科技做为依托，</div>
                    <div>互联网为载体，让财税融入科技化管理。</div>
                </div>

                <div class="link">
                    <template v-for="(item, index) in linkList">
                        <nuxt-link
                            v-if="item.link"
                            :key="index"
                            :to="item.link"
                            class="link-item"
                            rel="nofollow"
                        >
                            <div @click="goLink">{{ item.name }}</div>
                        </nuxt-link>
                        <a
                            v-else
                            :key="item.name"
                            href="/About"
                            class="link-item"
                        >
                            {{ item.name }}
                        </a>
                    </template>
                    <!-- <a href="/sitemap.xml" class="link-item" target="_blank">
                        网站地图
                    </a> -->
                </div>

                <div class="app-code">
                    <div class="app-code-1">
                        <img
                            src="~/assets/images/index/app_code.png"
                            alt="小竹财税APP下载"
                        />
                        <div>下载享专属优惠</div>
                    </div>
                    <div class="app-code-2">
                        <img
                            src="~/assets/images/index/wx_code.jpg"
                            alt="小竹公众号"
                        />
                        关注公众号 <br />
                        领取福利
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom-bottom">
            <a target="_blank" href="https://beian.miit.gov.cn/" rel="nofollow"
                >皖ICP备2021017961号</a
            >
            <a
                target="_blank"
                class="img-a"
                href="https://www.beian.gov.cn/portal/registerSystemInfo?recordcode=34011102003330"
                rel="nofollow"
            >
                <img src="~/assets/images/index/batb.png" alt="" />
                皖公网安备 34011102003330号
            </a>
            Copyright © 2021-2022 安徽小竹信息技术有限公司, All Rights Reserved.
        </div>
    </div>
</template>

<script>
function isElementNotInViewport(el) {
    let rect = el.getBoundingClientRect();
    return (
        rect.top >=
            (window.innerHeight || document.documentElement.clientHeight) ||
        rect.bottom <= 0
    );
}

import { mapMutations } from "vuex";
import { goTop } from "@/assets/utils/utils.js";

export default {
    name: "myFooter",
    props: ["lists"],
    data() {
        return {
            linkList: [
                // {
                //     name: '首页',
                //     link: '/'
                // },
                {
                    name: "问题库",
                    link: "/quizdata",
                },
                {
                    name: "税收法规库",
                    link: "/ssfgk/index/0/1",
                },
                {
                    name: "会计法规库",
                    link: "/kjfgk/index/0/1",
                },
                // {
                //     name: "小竹学院",
                //     link: "/school/kzzt",
                // },
                {
                    name: "小竹资讯",
                    link: "/information/rmzx/1",
                },
                {
                    name: "模板专区",
                    link: "/templates",
                },
                {
                    name: "小竹问答",
                    link: "/cswd",
                },
                {
                    name: "关于我们",
                    link: "/About",
                },
                {
                    name: "用户协议",
                    link: "/UserAgreement",
                },
                {
                    name: "服务商协议",
                    link: "/ServiceAgreement",
                },
                {
                    name: "小竹企服",
                    link: "/service",
                },
            ],
        };
    },
    mounted() {
        this.$nextTick(() => {
            window.addEventListener("scroll", this.handleScroll);
        });
    },
    destroyed() {
        window.removeEventListener("scroll", this.handleScroll);
    },
    methods: {
        ...mapMutations("common", ["setisFooterShow"]),
        // 监听滚动，判断该组件是否出现
        handleScroll() {
            if (isElementNotInViewport(this.$refs.footer)) {
                this.setisFooterShow(false);
            } else {
                this.setisFooterShow(true);
            }
        },

        goLink() {
            // if (item.link == null) {
            //     console.log(window.location.href)
            //     return
            // }
            // this.$router.push({ path: item.link })
            goTop(0, true);
        },
    },
};
</script>

<style lang="scss">
.xzcs-footer-bottom {
    .con {
        width: 1200px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100%;
    }

    .bottom {
        color: #fff;
    }

    .bottom-top {
        height: 210px;
        background: #161e30;

        .logo {
            font-size: 16px;
            color: #d1d1d1;

            img {
                width: 153px;
                height: 47px;
                display: block;
                margin-bottom: 18px;
            }
        }

        .link {
            display: flex;
            flex-wrap: wrap;
            width: 506px;

            .link-item {
                cursor: pointer;
                line-height: 46px;
                width: 88px;
                margin-right: 38px;
                font-size: 16px;
                color: #ffffff;
                text-decoration: none;
            }
        }

        .app-code {
            display: flex;
            font-size: 14px;
            color: #ffffff;
            text-align: center;
            position: relative;
            top: 14px;

            .app-code-1 {
                margin-right: 36px;
                div {
                    width: 100px;
                    text-align: center;
                    margin: 0 auto;
                }
                img {
                    width: 100px;
                    height: 100px;
                    display: block;
                    margin-bottom: 9px;
                }
            }

            .app-code-2 {
                img {
                    width: 100px;
                    height: 100px;
                    margin-bottom: 9px;
                    display: block;
                }
            }
        }
    }

    .bottom-bottom {
        background: #0f1626;
        height: 59px;
        font-size: 14px;
        color: #9e9e9e;
        line-height: 59px;
        text-align: center;

        a {
            color: #9e9e9e;
            text-decoration: none;
            margin: 0 4px;

            &:hover {
                color: #409eff;
                border-bottom: 1px solid #409eff;
            }
        }

        .img-a {
            img {
                width: 20px;
                height: 20px;
                position: relative;
                top: 4px;
                padding: 0;
                margin: 0;
            }
        }
    }
}
</style>